import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
    message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useSearchParams } from 'react-router-dom'
import './index.scss'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import {  getArticles,getArticlesDetail,getEditArticles } from '@/apis/acticle'
import {
    useState, useEffect

} from 'react'
import { useChannels } from '@/hooks/useChannel'
// const { Option } = Select

const Publish = () => {
    
    const { channels } = useChannels()
    const [form] = Form.useForm();
    // 回填表单数据
    const [searchParams] = useSearchParams()
    const articleId = searchParams.get('id')
    console.log(articleId);
    
    // 图片列表
    const [imageList, setImageList] = useState([])
    // 图片类型
    const [imageType, setimageType] = useState(1)
    // 切换图片类型
    function changeImageType(value) {
        console.log(value.target.value);
        setimageType(value.target.value)
    }
    useEffect(()=> {
        if(articleId) {
            getArticlesDetailApi()
        }
        
    },[])
    // 上传图片 
    function onchangeImg(value) {
        setImageList(value.fileList)
    }
    // 提交表单
    function onFinish(formValue) {
        console.log(imageList,imageType);
        
        // 校验图片
        if (imageList.length != imageType) return message.warning('封面类型和图片数量不匹配')
        console.log(formValue);
        getArticlesApi(formValue)
        console.log(123);

    }
    // 发布文章
    const getArticlesApi = async (formValue) => {
        const { channel_id, content, title } = formValue
        const params = {
            channel_id,
            content,
            title,
            type: 1,
            cover: {
                type: imageType,
                images: imageList.map(item => {
                   if(item.response) {
                     return item.response.data.url
                   }  else {
                    return item.url
                   }
                })
            }
        }
        console.log(params);

        let res = await  getArticles(params,articleId)
        if(articleId) {
            message.success('编辑文章成功')
        } else {
            message.success('发布文章成功')
        }
        form.resetFields();
        setImageList([])
        setimageType(0)
    }
    // 获取文章详情
    const getArticlesDetailApi = async () => {
        let res= await getArticlesDetail(articleId)
        console.log(res);
        form.setFieldsValue({...res.data,
    type: res.data.cover.type
        }
        )
        setimageType(res.data.cover.type)
        setImageList(res.data.cover.images.map(url => {
                return {url}  
        }))
        console.log(imageList,res.data.cover.images);
        
    }
    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: `${articleId ? '编辑文章' : '发布文章'} ` },
                    ]}
                    />
                }
            >
                <Form
                    form={form}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ type: 1 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入文章标题' }]}
                    >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{ required: true, message: '请选择文章频道' }]}
                    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {channels.map(item => {
                                return <option key={item.id} value={item.id}>
                                    {item.name}
                                </option>
                            })}
                        </Select>
                    </Form.Item>
                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={changeImageType}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {
                            imageType != 0 && <Upload
                                maxCount={imageType}
                                name="image"
                                listType="picture-card"
                                showUploadList
                                fileList={imageList}
                                action={'http://geek.itheima.net/v1_0/upload'}
                                onChange={onchangeImg}
                            >
                                <div style={{ marginTop: 8 }}>
                                    <PlusOutlined />
                                </div>
                            </Upload>
                        }

                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: '请输入文章内容' }]}
                    >
                        <ReactQuill
                            className="publish-quill"
                            theme="snow"
                            placeholder="请输入文章内容"
                        />
                    </Form.Item>

                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default Publish